<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试聊天API</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .container { display: flex; flex-direction: column; gap: 20px; }
        .input-group { display: flex; gap: 10px; }
        input, button { padding: 10px; font-size: 16px; }
        button { background-color: #4CAF50; color: white; border: none; cursor: pointer; }
        button:hover { background-color: #45a049; }
        #result { background-color: #f5f5f5; padding: 15px; border-radius: 5px; min-height: 100px; }
        pre { white-space: pre-wrap; word-wrap: break-word; }
    </style>
</head>
<body>
    <div class="container">
        <h1>测试聊天API - 修复版本</h1>
        
        <div class="input-group">
            <input type="text" id="message" placeholder="输入消息" value="你好">
            <input type="text" id="sessionId" placeholder="会话 ID" value="test_session_123">
            <button onclick="testChatAPI()">发送请求</button>
        </div>
        
        <div>
            <h3>请求结果:</h3>
            <div id="result"><pre>等待请求...</pre></div>
        </div>
        
        <div>
            <h3>请求详情:</h3>
            <div id="request-details"><pre>等待请求...</pre></div>
        </div>
    </div>

    <script>
        async function testChatAPI() {
            const message = document.getElementById('message').value;
            const sessionId = document.getElementById('sessionId').value;
            const resultElement = document.getElementById('result');
            const requestDetailsElement = document.getElementById('request-details');
            
            resultElement.innerHTML = '<pre>发送请求中...</pre>';
            
            try {
                // 构造请求数据，使用修复后的格式
                const requestData = {
                    session_id: sessionId,
                    message: message,
                    use_rag: false,
                    use_tools: false,
                    stream: false
                };
                
                // 显示请求详情
                const requestDetails = `请求URL: http://localhost:8001/v1/chat
请求方法: POST
请求头: Content-Type: application/json
请求体: ${JSON.stringify(requestData, null, 2)}`;
                requestDetailsElement.innerHTML = `<pre>${requestDetails}</pre>`;
                
                // 发送请求
                const startTime = Date.now();
                const response = await fetch('http://localhost:8001/v1/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(requestData)
                });
                const endTime = Date.now();
                
                // 获取响应信息
                const status = response.status;
                const statusText = response.statusText;
                let responseBody = '';
                
                if (status === 200) {
                    try {
                        responseBody = await response.json();
                    } catch (e) {
                        responseBody = await response.text();
                    }
                } else {
                    responseBody = await response.text();
                }
                
                // 显示响应结果
                const result = `状态码: ${status} ${statusText}
响应时间: ${endTime - startTime}ms
响应体: ${typeof responseBody === 'string' ? responseBody : JSON.stringify(responseBody, null, 2)}`;
                resultElement.innerHTML = `<pre>${result}</pre>`;
                
            } catch (error) {
                resultElement.innerHTML = `<pre>请求失败: ${error.message}</pre>`;
            }
        }
        
        // 页面加载时自动测试一次
        window.onload = testChatAPI;
    </script>
</body>
</html>